<template>
  <div class="dashboard-container">
    <div class="app-container">

      <!-- 放置表格和分页 -->
      <el-card
        v-loading="loading"
        :data="tableData"
        element-loading-text="给我一点时间"
        style="width: 100%"
      >
        <!-- 放置表格和分页 -->
        <!-- 搜索框 -->
        <el-form ref="form" :model="form" label-width="80px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="关键字">
                <el-input v-model="form.id" placeholder="根据编号搜索" clearable size="small" style="width:50%" />
              </el-form-item>
            </el-col>
            <el-col style="text-align: right;" :span="12">
              <el-button
                size="small"
                @click="deleteBtn"
              >清除
              </el-button>

              <el-button
                class="filter-item"
                size="small"
                type="primary"
                @click="searchDirectorys"
              >搜索
              </el-button>
            </el-col>
          </el-row>
        </el-form>
        <!-- 搜索框 -->

        <div class="mytitle">
          <el-alert
            :title="`数据一共${page.total} 条`"
            type="info"
            show-icon
            :closable="false"
          />
        </div>
        <!-- 主题部分 -->
        <el-table
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            fixed
            prop="id"
            label="编号"
            align="center"
            width="190"
          />
          <el-table-column
            prop="questionType"
            label="题型"
            :formatter="FormatterType"
            align="center"
          />
          <el-table-column
            prop="questionIDs"
            label="题目编号"
            align="center"
          >
          <!-- 枚举值 -->
            <template v-slot="{row}">
              <el-button
                v-for="item in row.questionIDs"
                :key="item.number"
                size="mini"
                type="text"
                :href="item"
                @click="previewBtn(item.id)"
              >
                {{ item.number }}
              </el-button>
            </template>

          </el-table-column>
          <el-table-column
            prop="addTime"
            label="录入时间"
            align="center"
          />
          <el-table-column
            prop="totalSeconds"
            label="答题时间(s)"
            align="center"
          />
          <el-table-column
            prop="accuracyRate"
            label="正确率"
            align="center"
          />
          <el-table-column
            prop="userName"
            label="录入人"
            align="center"
          />
          <el-table-column
            label="操作"
            align="center"
            width="80px"
          >
        <!-- 删除 -->
            <template v-slot="{row}">
              <el-button type="danger" size="small" icon="el-icon-delete" plain circle @click="deleteEmployee(row.id)" />
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row>
          <el-col   style="text-align: right;" class="pagetool">
            <PageTool
          :total="page.total"
          :pagination-page="page.page"
          :pagination-pagesize="page.pagesize"
          @pageChange="SizeChange"
          @pageSizeChange="Changee"
        />
          </el-col>
        </el-row>
         <!-- 分页组件 -->
      </el-card>
      <!-- 题目编号 -->
      <el-dialog v-if="showCodeDialog" :visible.sync="showCodeDialog" title="题目预览">
        <QuestionsPreview ref="QuestionsPreview" @showCodeDialog="showCodeDialog = false" />
      </el-dialog>
      <!-- 题目编号 -->
    </div>
  </div>
</template>

<script>
import { questionType } from '@/api/hmmm/constants'
import { randoms, removeRandoms, detail } from '../../api/hmmm/questions'
import PageTool from '../../module-hmmm/components/pageTool.vue'
import QuestionsPreview from '../components/questions-preview.vue'
export default {
  components: {
    QuestionsPreview,
    PageTool
  },
  data() {
    return {
      aaa: '',
      showCodeDialog: false,
      loading: false,
      tableData: [], // 接受数组
      page: {
        page: 1, // 当前页码
        pagesize: 10,
        total: ''
      },
      form: {
        id: ''
      },
      questions: []

    }
  },
  created() {
    this.randoms()
  },
  methods: {
    async randoms() {
      this.loading = true
      const { data } = await randoms(this.page)
      // console.log(data)
      this.tableData = data.items
      this.page.total = data.counts
      this.loading = false
      // console.log(data.items)
      this.questions = data.items.questionIDs
      // console.log(this.tableData.length);
      // const namenum = await list(this.tableData.id)
      // console.log(namenum)
    },
    // 每页显示信息条数
    SizeChange(val) {
      this.page.page = val
      this.randoms()
    },
    Changee(val) {
      this.page.pagesize = val
      this.page.page = 1
      this.randoms()
    },

    // 题型
    FormatterType(row, column, cellValue, index) {
      // row代表每一行的数据
      // console.log(row)
      const obj = questionType.find(item => item.value + '' === row.questionType)
      return obj ? obj.label : '未知'
    },

    // 删除
    deleteEmployee(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          removeRandoms({ id })
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.page.page = Math.ceil((this.page.total - 1) / this.page.pagesize)
          this.randoms()// 重新拉取数据
        }).catch(error => {
          console.log(error)
        })
    },

    // 题目编号
    async previewBtn(id) {
      this.showCodeDialog = true
      // this.$refs.QuestionsPreview.isShow = true
      const { data } = await detail({ id })
      this.$nextTick(() => {
        this.$refs.QuestionsPreview.detail(data)
        // this.showdialog = false
      })
    },





    //题目编号  枚举值
    async previewBtn(id) {
    this.showCodeDialog = true
    // this.$refs.QuestionsPreview.isShow = true
    const {data} = await detail({id})
    this.$nextTick(()=>{
    this.$refs.QuestionsPreview.detail(data)
  // this.showdialog = false
 })
    },


    /* 搜索框 */
    // 删除
    deleteBtn() {
      this.form.id = ''
      this.randoms()
    },
    // 搜索
    searchDirectorys() {
      console.log(this.form.id.trim().length)
      if (this.form.id.trim().length !== 0) {
        const keywords = this.tableData.filter(item => {
          return item.id.includes(this.form.id)
        })
        this.tableData = keywords
      } else {
        this.randoms()
      }
    }
    /* 搜索框 */
  }
}
</script>

<style scoped>
  .app-container{
padding: 10px;
  }
 .pagetool{
    margin-top: 20px;
  }
  .el-button+.el-button {
    margin: 0;
  }
  .mytitle{
  padding-bottom:  16px;

}
</style>
